<template>
  <ul class="news-list">
    <news-item
      v-for="news in newsArray"
      :key="news.id"
      :id="news.id"
      :title="news.title"
      :content="news.content"
      @del="del"
    ></news-item>
  </ul>
</template>

<script>
// 导入子组件使用，@表示src目录
import NewsItem from "@/components/NewsItem.vue";
export default {
  components: {
    // 注册子组件
    NewsItem,
  },
  data() {
    return {
      newsArray: [],
    };
  },
  created() {
    // 加载新闻列表数据
    this.loadNewsList();
  },
  methods: {
    del(id) {
      // 删除指定id的新闻
      const index = this.newsArray.findIndex((item) => item.id === id);
      this.newsArray.splice(index, 1);
    },
    // 发送axios请求获取新闻列表
    loadNewsList() {
      this.$axios.get("/static/news.json").then((response) => {
        // 获取到新闻列表数据
        this.newsArray = response.data;
      });
    },
  },
};
</script>

<style scoped>
.news-list {
  list-style: none;
  padding: 10px;
  border: 1px solid blue;
}
</style>
